<!-- 缺陷的状态分布组件 -->
<template>
	<div style="width: 100%; height: auto;text-align: center;">
		<div style="color: #737373;">
				项目
				<el-select clearable filterable v-model="conditions.projectId"
					@change="loadData()" placeholder="请选择项目">
					<el-option v-for="(project) in projects" :label="project.projectName" :value="project.projectId">
					</el-option> 
				</el-select>
				登记时间
				<el-date-picker type="date" placeholder="选择开始日期" value-format="timestamp" v-model="conditions.startTime" style="width: 20%;"></el-date-picker>
				<el-date-picker type="date" placeholder="选择结束日期" value-format="timestamp" v-model="conditions.endTime" style="width:20%;"></el-date-picker>
				<el-button type="primary" @click="loadData()">查询</el-button>
				<el-button @click="clearQuery()">清空</el-button>
				<el-button @click="exportChart()">导出</el-button>
		</div>
		<div id="chart" style="width: 700px; height: 500px;position: relative;left: 50%;margin-left: -400px;">			
		</div>
	</div>
</template>

<script>
	export default {
		name: 'report-state',
		data() {
			return {
				conditions:{
					projectId: null,
					projectName: null,
					startTime: null,
					endTime: null
				},
				xAxisData:[],
				returnData:[],
				projects:[],
				sum:0
			}
		},
		methods: {
			bar() {
				let mychart = this.$echarts.init(document.getElementById("chart"));
				mychart.setOption({
					title: {
						text:"缺陷类型",
						left:"center",
						},
					xAxis: {
						type: 'category',
						data: this.xAxisData,
					},
					yAxis: {
						type: 'value'
					},
					series: {
						type: 'bar',
						barWidth: 50,
						data: this.returnData
					}
				});
			},
			//导出图表
			exportChart(){
				var chart= this.$echarts.init(document.getElementById("chart"));
				var result=chart.getDataURL({
					type:'png',
					pexelRatio:2,
					backgroundColor:'#fff'
				})
				var $a =document.createElement('bar');
				$a.setAttribute("href",result);
				$a.setAttribute("download","");
				$a.click();
			},
			showInfo(row){
				this.dialogInfoVisible=true;
				this.showInfoData=row;
			},
			getDate(dateString) {
				return new Date(dateString).toLocaleDateString();
			},
			getTime(dateString){
				let date = new Date(dateString);
				return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
			},
			formatDate(row, column, cellValue) {
				return cellValue > 0 ? this.getDate(cellValue)+" "+this.getTime(cellValue) : '';
			},
			clearQuery(){
				this.conditions.projectId=null;
				this.conditions.startTime=null;
				this.conditions.endTime=null;
				this.loadData();
			},
			loadProject(){
				this.$http.get("/project/queryAllPro").then(resp=>{
					console.log(resp.data)
					if(resp.data.statusCode==200){
						this.projects=resp.data.data;
					}else{
						this.projects=[];
					}
				})
			},
			loadData(){
				this.$http.post("/defectInfo/findStatisticsByState",this.conditions).then(resp =>{
					if(resp.data.statusCode==200){
						this.returnData=resp.data.data;
						this.xAxisData=[];
						this.sum=0;
						for(let index in this.returnData){
							this.sum=this.sum+this.returnData[index].value;
						}
						for(let index in this.returnData){
							let data =  this.returnData[index];
							this.returnData[index].name=data.name+"("+((data.value/this.sum)*100).toFixed(2)+"%)";
							this.xAxisData.push(this.returnData[index].name);
						}
						this.bar()
					}
				})
			}
		},
		created() {
			this.loadProject()
		},
		mounted(){
			this.loadData()
		}
		
	}
</script>
<style>

</style>
